<script setup>
import { ref,onMounted } from 'vue';
import {getAqiCount,getCoverage} from '@/api/OtherStats';

//获取AQI数量/良好数量统计
const search = async() => {
  const res1 = await getAqiCount();
  const res2 = await getCoverage();
  console.log(res1,res2);
  
  if(res1.code === 200 && res2.code === 200){
    otherData.value = [
        { label: '空气质量检测总数量', value: res1.data.totalMeasurement },
        { label: '空气质量检测良好数量', value: res1.data.goodMeasurement },
        { label: '省会城市网格覆盖范围', value: res2.data.provinceCoverage },
        { label: '大城市网格覆盖范围', value: res2.data.megacityCoverage }
      ];
  }
};
// 数据统计信息
const otherData = ref([
  { label: '空气质量检测总数量', value: '' },
  { label: '空气质量检测良好数量', value: '' },
  { label: '省会城市网格覆盖范围', value: '' },
  { label: '大城市网格覆盖范围', value: '' }
]);

onMounted(() => { 
  search();
})
</script>

<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>统计数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>其它数据统计</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 其它数据统计卡片 -->
    <el-card class="other-data-card">
      <template #header>
        <div class="card-header">
          <span>其它数据统计</span>
        </div>
      </template>

      <!-- 使用 el-table 替换原生 table，保持与原模板一致风格 -->
      <el-table :data="otherData" border style="width: 100%">
        <el-table-column prop="label" label="统计项" width="250" />
        <el-table-column prop="value" label="数值" />
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.container {
  padding: 20px;
}

.el-breadcrumb {
  margin-bottom: 20px;
}

.other-data-card {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 16px;
  font-weight: bold;
}
</style>